<template>
  <div id="map" ref="chinaMap"></div>
</template>

<script>
import '../../../node_modules/echarts/map/js/china'
export default {
  data() {
    return {
      confirmedNum: []
    }
  },
  mounted() {
    this.confirmedNum = JSON.parse(localStorage.getItem('confirmedNum'))
    console.log(this.confirmedNum);
    this.initMap()
  },
  methods: {
    initMap() { // 渲染 china 地图
      let myChart = this.$echarts.init(this.$refs.chinaMap)
      let option = {
        animation: true,
        title: {
          text: '全国疫情确诊病例统计',
          left: 'center',
          top: '10'
        },
        // 提示工具，触发时显示详细数据
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}<br/>{c} 例',
          textStyle: {
            color: '#fff'
          }
        },
        // 视图映射工具，根据value来直观的显示数据所在区间
        visualMap: {
          min: 1000,
          max: 20000,
          itemHeight: 100,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          left: 30,
          bottom: 20,
          inRange: {
            color: [
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027'
            ]
          },
        },
        series: [
          {
            name: '确诊总数',
            type: 'map',
            map:"china",
            roam: false,
            data: this.confirmedNum,
            label: {
              show: true,
            },
            tooltip: {
              backgroundColor: 'rgba(51,51,51,0.7)',
              borderColor: '#fff',
              borderWidth: 1
            },
            zoom: 1.2,
            emphasis: {
              itemStyle: {
                areaColor: ''
              },
              label: {
                color: '#333'
              }
            }
          }
        ]
        // },
      }
      myChart.setOption(option)
    }
  },
}
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>